<!--考勤统计信息-->
<template>
  <div class="kaoqinCountContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <!--考勤人开始-->
    <div class="kaoqinName">
      <div class="kaoqinName_left">
        <van-image
          v-if="Info['photo']"
          round
          width="39px"
          height="39px"
          :src="`http://www.kdehw.com:83/uploads/images/user/${Info.photo}`"
          fit="cover"
          class="kaoqintx"
        />
        <p class="txphoto" v-else>{{substringname(Info.name)}}</p>
        <div>
          <p class="name">{{Info.name}}</p>
          <p class="title">{{Info.attendance_group}}</p>
        </div>
      </div>
      <div class="kaoqinName_right">{{this.now_time}}星期{{today_week}}</div>
    </div>
    <!--考勤人结束-->
    <!--日历开始-->
    <Calendar
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
      v-on:isToday="clickToday"
      :markDate="markDate"
    ></Calendar>
    <!--日历结束-->
    <!--考勤记录开始-->
    <div class="kaoqinCountContent" v-if="JSON.stringify(DayInfo) != '{}'">
      <p class="bancidesc">班次:{{start_date}}-{{end_date}}</p>
      <p class="dakacishu">
        <van-icon name="clock" class="clock" />
        <span>今日打卡2次，工时共计{{(DayInfo.exception_4/60).toFixed(1)}}小时</span>
      </p>
      <!--打卡记录-->
      <van-steps direction="vertical" :active="-1" class="content">
        <van-step>
          <p class="time">
            打卡时间 {{start_sign_date}}
            <span>(上班时间{{start_date}})</span>
          </p>
          <p class="locationp">
            <van-icon name="location" class="location" />
            <span>{{DayInfo.office_address}}</span>
          </p>
          <span class="status status1" v-if="DayInfo.sign_statu==1">正常</span>
          <span class="status status2" v-else-if="DayInfo.sign_statu==2">迟到</span>
          <span class="status status3" v-else-if="DayInfo.sign_statu==3">早退</span>
        </van-step>
        <van-step>
          <p class="time">
            打卡时间 {{end_sign_date}}
            <span>(下班时间{{end_date}})</span>
          </p>
          <p class="locationp">
            <van-icon name="location" class="location" />
            <span>{{DayInfo.office_address}}</span>
          </p>
          <span class="status status1" v-if="DayInfo.sign_statu==1">正常</span>
          <span class="status status2" v-else-if="DayInfo.sign_statu==2">迟到</span>
          <span class="status status3" v-else-if="DayInfo.sign_statu==3">早退</span>
        </van-step>
      </van-steps>
    </div>
    <div class="kaoqinCountNoContent" v-else>暂无打卡记录</div>
    <!--考勤记录结束-->
  </div>
</template>
<script>
import { mapState } from "vuex";
import Calendar from "vue-calendar-component";
import CommonBar from "../common/commonBar";
export default {
  components: {
    Calendar,
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      options: {
        lefttype: "left",
        centerText: "考勤月历"
      },
      Info: {},
      now_time: "",
      onworktime: "",
      offworktime: "",
      onstatus: "",
      today_week: "",
      markDate: [],
      dateArray: [],
      DayInfo: {},
      start_sign_date: "",
      end_sign_date: "",
      start_date: "",
      end_date: ""
    };
  },
  methods: {
    //取头像
       substringname(username) {
      if (username) {
        if (username.length >= 3) {
          return username.substr(username.length - 2, 2);
        } else {
          return username;
        }
      }
    },
    //月历统计
    getStatistics(params) {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      this.$http
        .get(
          `${this.$basePath}?service=App.AttendanceStatistics.ListStatisticByUser&api=88`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            console.log("月历统计", res);
            this.Info = res.data;
            this.dateArray = res.data.list;
            //把年月日对象取出来
            var datearr = [];
            res.data.list.forEach(function(item) {
              datearr.push({
                date_y: item.date_y,
                date_m: item.date_m,
                date_d: item.date_d
              });
            });
            console.log("年月日对象", datearr);
            //把数组对象的值取出来平成数组
            let new_arr = datearr.map(obj => {
              return obj.date_y + "-" + obj.date_m + "-" + obj.date_d;
            });
            this.markDate = new_arr;

            console.log(new_arr);
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },

    /**日历信息 */
    getdayinfo(day) {
      var currentDayInfo = this.dateArray.find(function(obj) {
        return obj.date_d === day;
      });
      this.DayInfo = Object.assign({}, currentDayInfo);
      console.log("对象1", this.DayInfo);
      if (this.DayInfo.start_sign_date != null) {
        this.start_sign_date = this.DayInfo.start_sign_date.split(" ")[1];
      } else {
        this.start_sign_date = this.DayInfo.start_sign_date;
      }
      if (this.DayInfo.end_sign_date != null) {
        this.end_sign_date = this.DayInfo.end_sign_date.split(" ")[1];
      } else {
        this.end_sign_date = this.DayInfo.end_sign_date;
      }
      if (this.DayInfo.start_date != null) {
        this.start_date = this.DayInfo.start_date.split(" ")[1];
      } else {
        this.start_date = this.DayInfo.start_date;
      }
      if (this.DayInfo.end_date != null) {
        this.end_date = this.DayInfo.end_date.split(" ")[1];
      } else {
        this.end_date = this.DayInfo.end_date;
      }
    },
    //切换月份
    changeDate(data) {
      console.log("切换月份", data); //左右点击切换月份
      var date = data.split("/")[0] + "-" + data.split("/")[1] + "-01";
      console.log("几月", date);
      var params = { token: this.token, date: date };
      this.getStatistics(params);
      var day = 1;
      this.getdayinfo(day);
    },

    //选择某个日期
    clickDay(data) {
      console.log("选中的某天", data); //选中某天
      var day = data.split("/")[2];
      console.log("选中的某天jihao ", day);
      this.getdayinfo(day);
    },
    clickToday(data) {
    },
    //把星期改成中文
    choseweekday() {
      var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = new Date().getDay();
      this.today_week = a[week];
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.now_time = year + "-" + month + "-" + day;
    }
  },
  created() {
    var d = new Date();
    var date = d.getFullYear() + "-" + (d.getMonth() + 1) + "-01";
    var params = { token: this.token, date: date };
    this.getStatistics(params);
    this.choseweekday();
    //判断当前日期记录是否为空
    var d = new Date();
    var day = d.getDate();
    console.log(day);
    this.getdayinfo(day);
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/canlder";
@import "../../assets/css/attendence";

[class*="van-hairline"]::after {
  border: none;
}
</style>